import React from 'react';
import ReactDOM from 'react-dom/client';
import { useI18n } from '@/utils/in18';

// -----------------------------
// photo_messagecard 组件
// 说明：
// - 该文件导出 `showPhotoMessage` 函数，用于在页面右下角短暂展示一条带图片的交互消息。
// - 消息包含缩略图、名字、国际化文本（从 `messageApi.photo_message` 读取）和关闭按钮。
// - 点击消息会触发全局事件 `open_info_card_from_message`，页面（如 `home/index.tsx`）可监听此事件并打开 `InformationCard`。
// - 消息在 3 秒后自动关闭，或可通过右侧的 X 手动关闭。
// - 本文件内所有注释均为中文，便于维护。
// -----------------------------

// 消息数据类型定义
type MessageData = {
    id: number;
    title?: string;
    src?: string;
    raw?: any;
    role_prompt?: string;
};

// MessageCard 仅负责展示单条消息的 UI，点击会触发打开 InformationCard 的全局事件
const MessageCard: React.FC<{ data: MessageData; onClose: () => void; onNavigate: (d: MessageData) => void }> = ({ data, onClose, onNavigate }) => {
    const { t } = useI18n();

    return (
        // 外层容器：固定在页面顶部居中，支持暗色/亮色
        <div className="fixed top-4 left-1/2 transform -translate-x-1/2 z-[1000000] pointer-events-auto">
            <div
                className="max-w-xs p-2 w-80 bg-transparent rounded-[1rem] overflow-hidden cursor-pointer"
                role="button"
                tabIndex={0}
            >
                {/* 背景进度条层：由内容层背景实现填充动画 */}
                <div className="relative w-full">
                    {/* 内容层（作为进度背景的承载） */}
                    <div
                        onClick={(e) => { e.stopPropagation(); onNavigate(data); }}
                        className="relative z-10 bg-white dark:bg-gray-800 shadow-lg rounded-[1rem] flex items-center p-2 overflow-hidden"
                    >
                        {/* 背景填充层：位于内容层内部，随时间从左到右扩展 */}
                        <div
                            aria-hidden
                            style={{
                                position: 'absolute',
                                left: 0,
                                top: 0,
                                bottom: 0,
                                width: '0%',
                                background: '#EC4B9B',
                                animation: 'photoFillAnim 3000ms linear forwards',
                                pointerEvents: 'none'
                            }}
                            onAnimationEnd={() => { try { onClose(); } catch { } }}
                        />
                        {/* 前景内容容器：确保文字与图片位于背景填充层之上 */}
                        <div className="relative z-10 flex items-center w-full">
                            {/* 左侧图片：缩略图 */}
                            <div className="flex-shrink-0">
                                <img src={data.src || ''} alt={data.title || ''} className="w-14 h-14 rounded-[0.5rem] object-cover object-top" />
                            </div>

                            {/* 中间文本区域：名字 + 国际化文本 */}
                            <div className="flex-1 px-3">
                                <div className="text-[1.1rem] font-bold text-gray-900 dark:text-gray-100 truncate">{data.title}</div>
                                <div className="text-xs text-gray-500 dark:text-gray-300">{t('messageApi.photo_message')}</div>
                            </div>

                            {/* 右侧关闭按钮 */}
                            <div className="px-2">
                                <button
                                    onClick={(e) => { e.stopPropagation(); onClose(); }}
                                    aria-label="close-message"
                                    className="text-gray-500 dark:text-gray-300 p-2"
                                >
                                    ✕
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {/* 注入局部 keyframes，用于进度条动画 */}
            <style>{`@keyframes photoFillAnim { from { width: 0%; } to { width: 100%; } }`}</style>
        </div>
    );
};

// 将消息渲染到 body 的工具函数，并自动在 3 秒后关闭
export function showPhotoMessage(data: MessageData) {
    // 创建容器并挂载到 body
    const container = document.createElement('div');
    document.body.appendChild(container);
    const root = ReactDOM.createRoot(container);

    // 关闭并清理函数
    const cleanup = () => {
        try {
            root.unmount();
        } catch { }
        try { container.remove(); } catch { }
    };

    // 点击消息时导航到 CreateImage 页面，携带必要参数
    const navigateToCreate = (d: MessageData) => {
        try {
            const id = d.id;
            const name = d.title || '';
            const image_url = (d.src || d.raw?.image_url || '') as string;
            const role_prompt = (d.role_prompt || d.raw?.role_prompt || '') as string;
            // 触发全局事件，由页面内的 React Router 监听并执行 navigate
            window.dispatchEvent(new CustomEvent('navigate_to_create_image', { detail: { id, name, image_url, role_prompt } }));
        } catch (e) {
            // fallback: 直接关闭消息
        }
        cleanup();
    };

    // 渲染组件（进度动画结束会触发 onClose）
    root.render(<MessageCard data={data} onClose={cleanup} onNavigate={navigateToCreate} />);

    // 作为后备，设置一个 3 秒后自动关闭的定时器（保证在不支持 CSS animationend 的环境下也能关闭）
    const timer = window.setTimeout(() => {
        try { cleanup(); } catch { }
    }, 3500);
}

export default MessageCard;


